/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:马星俊
 */

import React, {FC} from 'react';
import {Card, Descriptions, Drawer, Spin, Tabs, Tag} from 'antd';
import styles from '@/utils/utils.less'
import {SysRoleModel} from '../data';
import HistoryLogTable from '@/components/HistoryLog';
import Member from "@/pages/sys/role/components/Member";
import Module from "@/pages/sys/role/components/Module";
import Depts from "@/pages/sys/role/components/Dept";
import DeptDetails from "@/pages/sys/dept/components/Details";
import service from "../service";
import {DetailsDialogProps} from "@/global";
import {getDeptScopeName} from "@/utils/utils";
import useLoad from "@/hooks/useLoad";
import useDialog from "@/hooks/useDialog";

const {TabPane} = Tabs;

/** 系统角色详情组件 */
const SysRoleDetails: FC<DetailsDialogProps> = (props) => {
  const deptDetails = useDialog();
  const {params: {id}, visible, hide} = props;
  const {loading, data: model} = useLoad<SysRoleModel>({
    isLoad: Boolean(id),
    onLoad: () => service.selectById(id)
  }, [id]);

  return (
    <>
      <Drawer
        title="查看系统角色"
        width="50%"
        visible={visible}
        onClose={hide}
        destroyOnClose
        className={styles.drawerBodyPadding}>
        <Spin spinning={loading} wrapperClassName={styles.h100p}>
          <Tabs className={styles.drawerBodyTabsPadding}>
            <TabPane tab="基本信息" key="basic">
              {model && (
                <Card bordered={false} className={styles.cardBodyDesc}>
                  <Descriptions column={1} bordered={true} size="small" className={styles.detailsDescriptions}>
                    <Descriptions.Item label="角色名称">{model.name}</Descriptions.Item>
                    <Descriptions.Item label="角色编码">{model.code}</Descriptions.Item>
                    <Descriptions.Item label="所属机构">
                      <a onClick={() => deptDetails.show({id: model.deptId})}>{model.deptName}</a>
                    </Descriptions.Item>
                    <Descriptions.Item label="机构权限">{getDeptScopeName(model.deptScope)}</Descriptions.Item>
                    <Descriptions.Item label="状态"><Tag
                      color={model.status ? '#87d068' : '#ff5500'}>{model.status ? '启用' : '禁用'}</Tag></Descriptions.Item>
                    <Descriptions.Item label="序号">{model.path}</Descriptions.Item>
                    <Descriptions.Item label="备注">{model.remark}</Descriptions.Item>
                  </Descriptions>
                </Card>
              )}
            </TabPane>
            <TabPane tab="角色成员" key="role">
              {model && (<Member primaryKey={model.id}/>)}
            </TabPane>
            <TabPane tab="功能权限" key="module">
              {model && (<Module primaryKey={model.id}/>)}
            </TabPane>
            <TabPane tab="机构权限" key="dept">
              {model && (<Depts primaryKey={model.id}/>)}
            </TabPane>
            <TabPane tab="操作日志" key="history">
              {model && (<HistoryLogTable tableName="SysRole" primaryKey={model.id}/>)}
            </TabPane>
          </Tabs>
        </Spin>
      </Drawer>
      <DeptDetails {...deptDetails}/>
    </>

  );
};

export default SysRoleDetails;



